<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>导航高亮</title>
	<style>
		.nav {
			text-align: center;
		}

		.nav a {
			width: 120px;
			height: 50px;
			display: inline-block;
			background-image: url(bg.png);
			text-align: center;
			color: #000;
			text-decoration: none;
			line-height: 50px;
		}
		.banner {
			text-align: center;
		}

		p {
			width: 100px;
			height: 20px;
			display: inline-block;
		}

		a.active {
			background-image: url(image/bgc.png);
			color:#fff;
		}
	</style>
</head>

<body>
	<nav class="nav">
		<a href="javascript:;" onclick="myClick(0)">网站导航</a>
		<a href="javascript:;" onclick="myClick(1)">网站导航</a>
		<a href="javascript:;" onclick="myClick(2)">网站导航</a>
		<a href="javascript:;" onclick="myClick(3)">网站导航</a>
		<a href="javascript:;" onclick="myClick(4)">网站导航</a>
		<a href="javascript:;" onclick="myClick(5)">网站导航</a>
	</nav>
	<script>
		/*
            TODO:
            1.点击每个导航a标签给它动态加上active类样式，实现a标签高亮效果
            2.确保当前导航a标签只能一个高亮
        */
	    function myClick(index){
			let alist=document.querySelectorAll("a")
			let active=document.querySelector("a.active")
			if(active){
				active.classList.remove("active")
			}
			for(let i=1;i<alist.length;i++){
				alist[i].classList.remove("active")
			}
			alist[index].classList.add("active")

		}
	</script>
</body>

</html>